<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- saved from url=(0019)http://guajibao.me/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta property="qc:admins" content="20477305432121765234754636">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>不关机的云端电脑</title>
    <link rel="icon" type="image/x-icon" mce_href="/favicon.ico" href="image/favicon.ico">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-docs.min.css">
    <!--[if lt IE 8]>d
    <link rel="stylesheet" href="css/bootstrap-ie7.css">
    <![endif]-->


    <script src="js/jquery.min.js"></script>
    <%--<script src="js/jquery.form.js"></script>--%>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/themes/e2cloud/bootstrap/js/respond.src.js"></script>
    <![endif]-->
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/utils.js" type="text/javascript"></script>

    <script type="text/javascript">
        /**
         * 处理登陆事件
         */
        function validate() {

            var account = document.getElementById("account").value;
            var nickName = document.getElementById("nickName").value;
            var passwd1 = document.getElementById("passwd1").value;
            var passwd2 = document.getElementById("passwd2").value;
            var phoneNum = $("#phoneNum").val();

            if (!account || account.length == 0 || !validateEmail(account)) {
                alert("请填写正确的邮箱");
                $("#account").focus();
                return false;
            }

            if (!nickName || nickName.length == 0) {
                alert("请填写您的姓名");
                $("#nickName").focus();
                return false;
            }
            if (!passwd1 || passwd1.length == 0) {
                alert("请填写您的密码");
                $("#passwd1").focus();
                return false;
            }
            if (!passwd2 || passwd2.length == 0) {
                alert("请填写确认密码");
                $("#passwd2").focus();
                return;
            }

            if (passwd1 != passwd2) {
                alert("密码不匹配");
                $("#passwd2").focus();
                return false;
            }

            if (passwd1.length < 6) {
                alert("密码需要在6个字符以上");
                $("#passwd1").focus();
                return false;
            }

            if (!$("#phoneNum").val().match(/^1[3|4|5|8][0-9]\d{4,8}$/)) {
                alert("请填写正确的手机号");
                $("#phoneNum").focus();
                return false;
            }
            if ($("#QQ").val() == "") {
                alert("请填写您的QQ号");
                $("#QQ").focus();
                return false;
            }
            if ($("#inviteCode").val() == "") {
                alert("请填写邀请码");
                $("#inviteCode").focus();
                return false;
            } if ($("#volidateCode").val() == "") {
                alert("请填写您手机收到的验证码");
                $("#volidateCode").focus();
                return false;
            }
            return true;
        }

        /**
         * 实现倒计时提示重新获取验证码
         */
        var count = 60;
        var timer;
        /**
         *    是否在进行60s的验证码等待时间
         */
        var isWaitCurrVolidateCode = false;
        function timedCount() {

            $("#getVolidateCodeAnchor").text(count + "s后重新获取");
            timer = setTimeout("timedCount()", 1000)
            count--;

            if (count <= 0) {
                $("#getVolidateCodeAnchor").text("获取验证码");
                clearTimeout(timer);
                isWaitCurrVolidateCode = false;
            }
        }
        /**
         * 获取验证码
         */
        function doGetVolidateCode() {
            if (isWaitCurrVolidateCode) {
                return;
            }
            var phoneNum = $("#phoneNum").val();

            if (!phoneNum || phoneNum.length == 0) {
                alert("请输入您手机号以获取验证");
                return;
            }

            timedCount();
            isWaitCurrVolidateCode = true;

            var url = "/sendVerificatedCode?phoneNum=" + phoneNum;
            $.get(url, function (result) {
                alert(result.msg);
            });

        }
        $(document).ready(function () {
            $("#userForm").submit(function () {
                if(!validate()){
                    return false;
                }
                var url = "/doRegister"; // the script where you handle the form input.
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $("#userForm").serialize(), // serializes the form's elements.
                    success: function (data) {
                        if(data.succ){
                            window.location.href = '/login';
                        }else{
                            alert(data.msg);
                        }

                    }
                });

                return false; // avoid to execute the actual submit of the form.
            });
        });

    </script>
</head>

<body data-spy="scroll" data-target="#myScrollspy">

<div>
    <nav class="navbar-l1 navbar-default navbar-static-top" role="navigation"
         style="background-color:#008eb7;min-height:80px;">
        <div class="container-fluid">
            <%--<div class="navbar-header">--%>
                <%--<a class="navbar-brand" href="./GuaJiBaoLogin_files/GuaJiBaoLogin.html"><img--%>
                        <%--src="image/50-258-white.png" alt="guajibao_logo" title="guajibao_logo"></a>--%>
            <%--</div>--%>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right btn">
                    <li sy><a style="display: none" target="_blank"
                              href="http://wpa.qq.com/msgrd?v=3&uin=2458726121&site=qq&menu=yes"><img
                            border="0" src="image/q20-20.png" alt="点击这里给我发消息" title="点击这里给我发消息">联系官方客服</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="row">
        <div class="col-md-offset-1 col-md-10 jumbotron">
            <% if (request.getParameter("errMsg") != null) { %>
            <div class="form-group">
					<span class="btn bg-danger btn-block">${errMsg}
                    </span>
            </div>
            <% }%>


            <form id="userForm" class="form-horizontal" method="post" action="doRegister">
                <div class="form-group">
                    <label class="control-label col-md-2" for="account">注册邮箱：</label>

                    <div class="input-group col-md-5">
                        <input type="email" class="form-control" placeholder="" name="account" id="account"

                               maxlength="50">
                        <span class="help-block">请务必使用常用邮箱</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="account">姓名：</label>

                    <div class="input-group col-md-5">
                        <input class="form-control" placeholder="" name="nickName" id="nickName"
                               maxlength="50">
                        <span class="help-block">&nbsp;&nbsp;</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="passwd1">密码：</label>

                    <div class="input-group col-md-5">
                        <input type="password" name="passwd1" id="passwd1" maxlength="20" class="form-control"
                               placeholder="">
                        <span class="help-block">建议使用 字母 + 数字 + 字符的密码组合，6-20个字符</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="passwd2">确认密码：</label>

                    <div class="input-group col-md-5">
                        <input type="password" name="passwd2" id="passwd2" maxlength="20" class="form-control"
                               placeholder="">
                        <span class="help-block">请再次确认密码</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="passwd2">手机号：</label>

                    <div class="input-group col-md-5">
                        <input name="phoneNum" id="phoneNum" maxlength="20" class="form-control"
                               placeholder="">
                        <span class="help-block">请输入手机号</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="passwd2">QQ：</label>

                    <div class="input-group col-md-5">
                        <input name="QQ" id="QQ" maxlength="20" class="form-control"
                               placeholder="">
                        <span class="help-block">请输入您常用的QQ号</span>
                    </div>
                </div>
                <%--<div class="form-group">--%>
                    <%--<label class="control-label col-md-2" for="inviteCode">邀请码：</label>--%>

                    <%--<div class="input-group col-md-5">--%>
                        <%--<input name="inviteCode" id="inviteCode" maxlength="20" class="form-control"--%>
                               <%--placeholder="">--%>
                        <%--&lt;%&ndash;<span class="help-block">请输入手机号以获取验证码</span>&ndash;%&gt;--%>
                    <%--</div>--%>
                <%--</div>--%>


                <%--<div class="form-group">--%>
                    <%--<label class="control-label col-md-2">验证码：</label>--%>

                    <%--<div class="input-group">--%>
                        <%--<input type="text" name="volidateCode" id="volidateCode" style="width:40%;margin-right: 20px"--%>
                               <%--id="captcha"--%>
                               <%--class="form-control">--%>
                        <%--<a type="button" class="btn btn-default btn-block" style="margin-left: 100px;width: 130px"--%>
                           <%--id="getVolidateCodeAnchor" onclick="doGetVolidateCode()">获取验证码</a>--%>

                    <%--</div>--%>
                <%--</div>--%>
                <div class="row">
                    <%--<label class="control-label col-md-2" for="captcha"></label>--%>

                    <div class="col-md-2" style="padding-left:0px;">
                        <%--<a   class="btn btn-primary btn-block" type="submit" onclick="doLogin()">注册</a>--%>
                        <input type="submit" class="btn btn-primary btn-block" value="注册">
                    </div>
                    <div class="col-md-2" style="padding-left:0px;">
                        <a type="button" class="btn btn-default btn-block" href="/login">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="myModal-sm" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!-- /.model-content -->
        </div>
        <!-- /.model-dialog -->
    </div>
    <!-- /.model -->
</div>


<script type="text/javascript">
    if (window.ActiveXObject) {
        var ua = navigator.userAgent.toLowerCase();
        var ie = ua.match(/msie ([\d.]+)/)[1]
        if (ie == 6.0) {
            alert("您的浏览器版本过低，无法正常使用新版zhekou.com系统，请先升级浏览器版本！");
        }
    }
</script>


</body>
</html>